---
export interface Props {
    index: number;
}
const { index } = Astro.props as Props;
---

<article
    id={`slide-${index}`}
    data-slide-index={index}
    class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2 px-4 md:px-6 py-6 relative
    flex flex-col justify-center"
>
    <h3 class="font-black uppercase mb-4 text-2xl md:text-4xl lg:text-5xl xl:text-6xl leading-tight">
        LINUX & WEB DEV TUTORIALS
    </h3>
    <p class="text-base md:text-lg mb-4 md:mb-6">
        Practical guides, notes, and projects on Arch Linux and web development.
    </p>
    <div class="flex flex-wrap gap-2">
        <a
            href="/linux-guides"
            class="border-3 border-black bg-secondary text-black px-4 py-2
                                        font-bold shadow-neo hover:shadow-none hover:translate-y-0.5 transition-all"
        >
            Browse Linux Posts
        </a>
        <a
            href="/web-dev"
            class="border-3 border-black bg-cyan text-black px-4 py-2
                                        font-bold shadow-neo hover:shadow-none hover:translate-y-0.5 transition-all"
        >
            Browse Web Dev Posts
        </a>
    </div>
</article>
